<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.pop()">删除最后一个元素</button>
        <button @click="list.push('小七')">添加到最后</button>
        <!-- 通过下标修改数组元素，不会触发界面更新，这是Vue2的缺陷 -->
        <!-- Vue3没有这个问题 -->
        <button @click="list[0] = '张三丰'">通过下标修改数组</button>
        <!-- 我就是想通过下标改元素，而且还能触发界面更新，怎么办？ -->
        <!-- 用$set,vue3里把$set删掉了 -->
        <button @click=" $set(list, 0, '张三丰')  ">触发更新的写法</button>
        <ul>
            <!-- 在需要产生的标签身上写v-for -->
            <!-- 根据list这个数组来循环生成li -->
            <!-- 数组有3个元素，这里会产生3个li -->
            <!-- item就是数组中的每一项 -->
            <li v-for="item in list">{{ item }}</li>

            <!-- 完整形式是：既拿到每一项，又拿到下标 -->
            <!-- <li v-for="(item, index) in list">{{ item }} --- {{ index }}</li> -->

            <!-- 每一项和下标是可以改名的，名字没有任何影响 -->
            <!-- <li v-for="(v, i) in list">{{ v }} --- {{ i }}</li> -->

            <!-- 此时index就是每一项， item就是下标 -->
            <!-- 证明跟名字没有半毛钱关系，只是跟位置有关，先写的一定是每一项，后写的一定是下标 -->
            <!-- 但一般我们肯定不会这么起名字 -->
            <!-- <li v-for="(index, item) in list">{{ item }} --- {{ index }}</li> -->
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 数组有多少个元素，就创建多少个li
                    list: ['张三', '李四', '王五', '赵六']
                }
            },
        })
    </script>
</body>
</html>